<template>
	<view class="content" style="height: calc(100vh - 1px);">
		<u-navbar title="商务合作" :autoBack="true" :bgColor="bgColor"></u-navbar>
		<image :src="baseUrl+'cooperate.jpg'" class="cooperate" />
		<input type="text" class="name" v-model="name" />
		<input type="text" class="company" v-model="company" />
		<input type="text" class="position" v-model="position" />
		<input type="text" class="tel" v-model="phone" maxlength="11" />
		<input type="text" class="wechat" v-model="wechat" />
		<image :src="baseUrl+'select.png'" class="select select1" v-if="cooperationIndex[0]==false"
			@click="select(0)" />
		<image :src="baseUrl+'selected.png'" class="select select1" v-else @click="select(0)" />
		<image :src="baseUrl+'select.png'" class="select select2" v-if="cooperationIndex[1]==false"
			@click="select(1)" />
		<image :src="baseUrl+'selected.png'" class="select select2" v-else @click="select(1)" />
		<image :src="baseUrl+'select.png'" class="select select3" v-if="cooperationIndex[2]==false"
			@click="select(2)" />
		<image :src="baseUrl+'selected.png'" class="select select3" v-else @click="select(2)" />
		<image :src="baseUrl+'select.png'" class="select select4" v-if="cooperationIndex[3]==false"
			@click="select(3)" />
		<image :src="baseUrl+'selected.png'" class="select select4" v-else @click="select(3)" />
		<image :src="baseUrl+'select.png'" class="select select5" v-if="cooperationIndex[4]==false"
			@click="select(4)" />
		<image :src="baseUrl+'selected.png'" class="select select5" v-else @click="select(4)" />
		<image :src="baseUrl+'select.png'" class="select select6" v-if="cooperationIndex[5]==false"
			@click="select(5)" />
		<image :src="baseUrl+'selected.png'" class="select select6" v-else @click="select(5)" />
		<textarea class="input" placeholder="请输入你期待的合作方式" v-model="expected" />
		<view class="nextBtn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				bgColor: 'transparent',
				baseUrl: `https://cdn.zkjialan.com/img/user/`,
				name: '',
				company: '',
				position: '',
				phone: '',
				wechat: '',
				cooperationIndex: [false, false, false, false, false, false],
				cooperationArr: ['大健康平台合作', '线下机构合作（体检、基因检测、医院、健康管理、美业）', '线上平台嵌入式分销', '达人合作', '品牌合作', '媒体合作'],
				cooperation: [],
				expected: ''
			}
		},
		methods: {
			submit() {
				if (!this.name) {
					this.$toast({
						title: '请输入你的姓名'
					})
					return;
				}
				if (!this.company) {
					this.$toast({
						title: '请输入品牌或公司'
					})
					return;
				}
				if (!this.position) {
					this.$toast({
						title: '请输入你的职位'
					})
					return;
				}
				if (!this.phone) {
					this.$toast({
						title: '请输入你的电话'
					})
					return;
				}
				if (!(/^1[3|4|5|6|8|7|9][0-9]\d{8}$/.test(this.phone))) {
					this.$toast({
						title: '电话号码格式不正确'
					})
					return false;
				}
				if (!this.wechat) {
					this.$toast({
						title: '请输入你的微信'
					})
					return;
				}
				if (this.cooperation.length == 0) {
					this.$toast({
						title: '请选择合作方向'
					})
					return;
				}
				if (!this.expected) {
					this.$toast({
						title: '请输入合作方式'
					})
					return;
				}
				this.$request.post(`shopapi/Cooperation/user_cooperation`, {
					user_id: JSON.parse(uni.getStorageSync('store_userId')).value,
					name: this.name,
					company: this.company,
					position: this.position,
					phone: this.phone,
					wechat: this.wechat,
					cooperation: JSON.stringify(this.cooperation),
					expected: this.expected
				}).then(res => {
					console.log(res.data);
					this.$toast({
						title: res.data.msg
					})
				})
			},
			select(num) {
				this.cooperationIndex[num] = !this.cooperationIndex[num];
				let sel = this.cooperationArr[num];
				this.updateArray(this.cooperation, sel);
			},
			updateArray(arr, value) {
				var index = arr.indexOf(value);
				if (index !== -1) {
					arr.splice(index, 1); // 从数组中删除值
				} else {
					arr.push(value); // 向数组中添加值
				}
				return arr;
			}
		},
		computed: {},
		onLoad() {},
		onShow() {}
	}
</script>

<style lang="scss" scoped>
	.input {
		width: 610rpx;
		height: 321rpx;
		border-radius: 15rpx;
		margin-left: 40rpx;
		margin-top: 126rpx;
		// background-color: #f6f6f6;
		padding: 30rpx;
	}

	.select {
		position: relative;
		width: 37rpx;
		height: 37rpx;
		display: block;
		margin-left: 38rpx;
	}

	.select1 {
		margin-top: 116rpx;
	}

	.select2 {
		margin-top: 30rpx;
	}

	.select3 {
		margin-top: 64rpx;
	}

	.select4 {
		margin-top: 30rpx;
	}

	.select5 {
		margin-top: 28rpx;
	}

	.select6 {
		margin-top: 28rpx;
	}

	.company,
	.position,
	.tel,
	.wechat {
		position: relative;
		width: 664rpx;
		height: 86rpx;
		margin-left: 38rpx;
		margin-top: 105rpx;
		padding-left: 10rpx;
	}

	.name {
		position: relative;
		width: 664rpx;
		height: 86rpx;
		margin-left: 38rpx;
		margin-top: 907rpx;
		padding-left: 10rpx;
	}

	.cooperate {
		position: absolute;
		width: 750rpx;
		height: 3087rpx;
	}

	.nextBtn {
		position: relative;
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		font-family: 'am';
		border-radius: 45rpx;
		margin-left: 76rpx;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
		background-color: #f08229;
	}

	/deep/.u-title {
		font-size: 33rpx !important;
		font-family: 'am';
		color: #000000 !important;
	}

	/deep/ .u-icon__icon {
		color: #000000 !important;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}

	page {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}
</style>